<wicket:panel>
	<div wicket:id="container" class="markdown-editor autofit no-autosize name-changing-listener">
		<div class="head">
			<div class="actions clearfix">
				<div class="float-left normal-mode clearfix">
					<a class="do-bold float-left" title="Bold"><wicket:svg href="bold" class="icon"></wicket:svg></a>
					<a class="do-italic float-left" title="Italic"><wicket:svg href="italic" class="icon"></wicket:svg></a>
					<a class="do-header float-left" title="Heading"><wicket:svg href="header" class="icon"></wicket:svg></a>
					<span class="separator float-left"></span>
					<a class="do-link float-left" title="Link (Ctrl-L)"><wicket:svg href="link" class="icon"></wicket:svg></a>
					<a class="do-image float-left" title="Image (Ctrl-I)"><wicket:svg href="image" class="icon"></wicket:svg></a>
					<span class="separator float-left"></span>
					<a class="do-list float-left" title="Unordered list"><wicket:svg href="unordered-list" class="icon"></wicket:svg></a>
					<a class="do-orderlist float-left" title="Ordered list"><wicket:svg href="ordered-list" class="icon"></wicket:svg></a>
					<a class="do-tasklist float-left" title="Task list"><wicket:svg href="tick-box" class="icon"></wicket:svg></a>
					<a class="do-code float-left" title="Code"><wicket:svg href="code" class="icon"></wicket:svg></a>
					<a class="do-quote float-left" title="Quote"><wicket:svg href="quote" class="icon"></wicket:svg></a>
					<span class="separator float-left"></span>
					<a class="do-emoji float-left" title="Show emojis"><wicket:svg href="smile" class="icon"></wicket:svg></a>
					<a class="do-mention float-left" title="Mention someone"><wicket:svg href="at" class="icon"></wicket:svg></a>
					<div class="reference float-left dropdown">
						<a data-toggle="dropdown" title="Reference issue, build, or pull request"><wicket:svg href="hash" class="icon"></wicket:svg></a>
						<div class="dropdown-menu" aria-labelledby="dLabel">
							<a class="dropdown-item do-reference" data-reference="issue"><wicket:svg href="bug" class="icon"></wicket:svg> Reference Issue</a>
							<a class="dropdown-item do-reference" data-reference="pull request"><wicket:svg href="pull-request" class="icon"></wicket:svg> Reference Pull Request</a>
							<a class="dropdown-item do-reference" data-reference="build"><wicket:svg href="play-circle" class="icon"></wicket:svg> Reference Build</a>
						</div>					
					</div>
				</div>
				<div class="float-left dropdown compact-mode">
					<a href="#" data-toggle="dropdown" type="button"><wicket:svg href="menu" class="icon"></wicket:svg></a>
					<div class="dropdown-menu" aria-labelledby="dLabel">
						<a class="dropdown-item do-bold"><wicket:svg href="bold" class="icon"></wicket:svg> Bold</a>
				    	<a class="dropdown-item do-italic"><wicket:svg href="italic" class="icon"></wicket:svg> Italic</a>
						<a class="dropdown-item do-header"><wicket:svg href="header" class="icon"></wicket:svg> Heading</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item do-link"><wicket:svg href="link" class="icon"></wicket:svg> Link <span class="float-right">Ctrl-L</span></a>
						<a class="dropdown-item do-image"><wicket:svg href="image" class="icon"></wicket:svg> Image <span class="float-right">Ctrl-I</span></a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item do-list"><wicket:svg href="unordered-list" class="icon"></wicket:svg> Unordered List</a>
						<a class="dropdown-item do-orderlist"><wicket:svg href="ordered-list" class="icon"></wicket:svg> Ordered List</a>
						<a class="dropdown-item do-tasklist"><wicket:svg href="tick-box" class="icon"></wicket:svg> Task List</a>
						<a class="dropdown-item do-code"><wicket:svg href="code" class="icon"></wicket:svg> Code</a>
						<a class="dropdown-item do-quote"><wicket:svg href="quote" class="icon"></wicket:svg> Quote</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item do-emoji"><wicket:svg href="smile" class="icon"></wicket:svg> Show Emojis</a>
						<a class="dropdown-item do-mention"><wicket:svg href="at" class="icon"></wicket:svg> Mention Someone</a>
						<a class="dropdown-item do-reference" data-reference="issue"><wicket:svg href="bug" class="icon"></wicket:svg> Reference Issue</a>
						<a class="dropdown-item do-reference" data-reference="pull request"><wicket:svg href="pull-request" class="icon"></wicket:svg> Reference Pull Request</a>
						<a class="dropdown-item do-reference" data-reference="build"><wicket:svg href="play-circle" class="icon"></wicket:svg> Reference Build</a>
					</div>
				</div>
				<div class="float-right clearfix">
					<a class="do-fullscreen float-left" title="Full screen"><wicket:svg href="expand" class="icon"></wicket:svg></a>
					<a class="do-help float-left" title="Help"><wicket:svg href="question" class="icon"></wicket:svg></a>
					<span class="separator float-left"></span>
					<a wicket:id="editLink" class="edit float-left" title="Edit"><wicket:svg href="edit" class="icon"></wicket:svg></a>
					<a class="preview float-left" title="Preview"><wicket:svg href="eye" class="icon"></wicket:svg></a>
					<a wicket:id="splitLink" class="split float-left" title="Split view"><wicket:svg href="split" class="icon"></wicket:svg></a>
				</div>						
			</div>			
			<div class="warning alert alert-warning">
				<a class="close" data-dismiss="alert"><span>&times;</span></a>
				<div class="message"><wicket:svg href="warning" class="icon"/> Below content is restored from an unsaved change</div>
			</div>
			<div class="emojis"></div>
			<div class="help">
				<a href="https://guides.github.com/features/mastering-markdown/" target="_blank">GitHub flavored markdown</a> is accepted. 
				<span wicket:id="canAttachFile">You may drop file/image to the input box, or paste image from clipboard</span>
			</div>
		</div>
		<div class="body clearfix">
			<div wicket:id="edit" class="edit">
				<textarea wicket:id="input"></textarea>
				<div class="ui-resizable-handle ui-resizable-s"></div>
			</div>
			<div wicket:id="preview" class="preview">
				<div wicket:id="rendered" class="markdown-rendered"></div>
				<div class="ui-resizable-handle ui-resizable-s"></div>
			</div>
		</div>
	</div>
</wicket:panel>